<!--考评信息-->
<template>
  <div class="table-container">
    <el-tabs
      class="tabstyle"
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="2021" name="first">
        <div class="vertical-table">
          <table border="1">
            <thead>
              <tr>
                <th class="bold-header">考评</th>
                <th class="bold-header">考评成绩</th>
                <th class="bold-header">考评结果</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData2021" :key="index">
                <td>{{ item.label }}</td>
                <td>{{ item.value1 }}</td>
                <td>{{ item.value2 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="2022" name="second">
        <div class="vertical-table">
          <table border="1">
            <thead>
              <tr>
                <th class="bold-header">考评</th>
                <th class="bold-header">考评成绩</th>
                <th class="bold-header">考评结果</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData2022" :key="index">
                <td>{{ item.label }}</td>
                <td>{{ item.value1 }}</td>
                <td>{{ item.value2 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="2023" name="third">
        <div class="vertical-table">
          <table border="1">
            <thead>
              <tr>
                <th class="bold-header">考评</th>
                <th class="bold-header">考评成绩</th>
                <th class="bold-header">考评结果</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData2023" :key="index">
                <td>{{ item.label }}</td>
                <td>{{ item.value1 }}</td>
                <td>{{ item.value2 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="alert-text">
      <p><strong>注：若有考核未参加则不显示该考核的相关数据</strong></p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      tableData2021: [
        {
          label: '年度绩效考核',
          value1: '75',
          value2: '良好',
        },
        {
          label: '年度公司考核',
          value1: '83',
          value2: '优秀',
        },
        {
          label: '年度工作考核',
          value1: '79',
          value2: '良好',
        },
        {
          label: '年度综合考核',
          value1: '88',
          value2: '优秀',
        },
        {
          label: '年度履职考核',
          value1: '89',
          value2: '优秀',
        },
      ],
      tableData2022: [
        {
          label: '年度绩效考核',
          value1: '88',
          value2: '优秀',
        },
        {
          label: '年度公司考核',
          value1: '83',
          value2: '优秀',
        },
        {
          label: '年度工作考核',
          value1: '88',
          value2: '优秀',
        },
        {
          label: '年度综合考核',
          value1: '88',
          value2: '优秀',
        },
        {
          label: '年度履职考核',
          value1: '89',
          value2: '优秀',
        },
      ],
      tableData2023: [
        {
          label: '年度绩效考核',
          value1: '77',
          value2: '良好',
        },
        {
          label: '年度公司考核',
          value1: '83',
          value2: '优秀',
        },
        {
          label: '年度工作考核',
          value1: '79',
          value2: '良好',
        },
        {
          label: '年度综合考核',
          value1: '88',
          value2: '优秀',
        },
        {
          label: '年度履职考核',
          value1: '89',
          value2: '优秀',
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="less" scoped>
.table-container {
  width: 100%; /* 确保容器宽度占满父元素 */
  box-sizing: border-box; /* 确保padding不会增加容器的总宽度 */
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column;
  justify-content: center; /* 横向居中子元素 */
  align-items: center; /* 如果需要垂直居中也可以设置，但通常对表格不需要 */
  //background-color: rgb(243, 147, 29);
}
.tabstyle {
  margin-top: 30px;
}
.alert-text {
  margin-top: 30px;
}
.vertical-table table {
  width: 800px;
  border-collapse: collapse;
  margin: 20px 0px 20px 0px;
  // background-color: rgb(136, 194, 121);
}
.vertical-table table,
.vertical-table td,
.vertical-table th {
  border: 1px solid black;
}
.vertical-table td,
.vertical-table th {
  padding: 15px;
  text-align: left;
}
/* 表头加粗样式 */
.bold-header {
  font-weight: bold;
}
</style>
